<template>

  <div class="wrape-content">
      <div class="content">
          <div class="top">
              <img src="../assets/user-image/location.png" alt="位置">
              <span>您当前所在的位置：技术支持管理</span>
          </div>
          <div class="form">
              <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px" class="ruleForm">
                  <!-- <el-form-item label="模块查询" prop="name">
                     <el-input v-model="ruleForm.name"  placeholder="模块标题"></el-input>
                  </el-form-item> -->
                <el-form-item></el-form-item></el-form>
               <section class="oprtionbtn"> <el-button type="primary" size="small" class="feicuilu" @click="addTechnology">新增</el-button></section>
          </div>
          <div class="Table">
              <el-table
             v-if="tableshow"
              style="width:98%;margin:0 auto"
              show-overflow-tooltip
              :height="height"
               border
              :data="tableData"
              :row-class-name="Rowclassname"
              :span-method="arraySpanMethod"  
              >
            
            <el-table-column
            v-for="(item,index) in tableHeaderData"
            show-overflow-tooltip
            :key="index"
            :prop="item.prop"
            :label="item.label"
             align="center"
            >
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                align="center"
                width="100">
                <template slot-scope="scope">
                <div class="actionbtn" style="background:#24B3B3"><img  @click="upDataTec(scope.row)"  src="../assets/edit.png" title="修改"/></div>
                <div class="actionbtn" style="background:#F56262"> <img @click="confimDelet(scope.row)" src="../assets/delete_right.png" title="删除"/></div>
              </template>
            </el-table-column> 
          </el-table>
          </div>
           <el-dialog  class="Notic" :visible.sync="AddDialog" :title="edititle" width="60%">
          <span style="font-size:17px;color:#041f41"><b>基本信息:</b></span>
          <div class="from">
             <el-form :model="NoticruleForm" :rules="noticrules" ref="NoticruleForm" label-width="140px" class="NoticruleForm">
               <el-form-item label="姓名" prop="contact" >
                 <el-input placeholder="请输入新增技术人员姓名" v-model="NoticruleForm.contact"></el-input>
               </el-form-item>
             
                <el-form-item label="联系方式" prop="cellphone" >
                 <el-input placeholder="请输入联系方式" v-model.number="NoticruleForm.cellphone"></el-input>
               </el-form-item>
                 <el-form-item label="技术交流群号" prop="qq_num"   >
                 <el-input placeholder="请输入技术交流群号" v-model.number="NoticruleForm.qq_num" ></el-input>
               </el-form-item>
               
              <el-form-item label="所属模块" prop="project_code" >
                <el-select v-model="NoticruleForm.project_code" clearable placeholder="请选择所属模块">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
              </el-select>
               </el-form-item>

             </el-form>
          </div>
           <span slot="footer" class="dialog-footer" >
          
             <el-button type="primary"  @click="resetForm('NoticruleForm')">重置</el-button>
             <el-button type="primary" class="feicuilu" @click="submitForm('NoticruleForm')">确定</el-button>
        </span>
      </el-dialog>

      </div>
      
  </div>
</template>

<script>
export default {
  components:{},
  props:{},
  data(){
      var  Rgecellphone =(rules,value,callback) =>{
           let reg = /^1(3|4|5|7|8|6|9)\d{9}$/
           if(reg.test(value)){
             callback()
           }else{
             callback(new Error("请输入正确的手机号码"))
           }
      }
      var Rgenum = (rules,value,callback)=>{
        let reg = /\d/
         if(reg.test(value)){
             callback()
           }else{
             callback(new Error("请输入数字类型"))
           }
      }
    return {
        ruleForm:{},
        tableshow:true,
        height:660+'px',
        rules:{},
        spanArr:[],
        AddDialog:false, // 增加修改的弹窗
        edititle:"新增技术人员",
        pos:0,
        NoticruleForm:{
           project_code:"1",
           contact:"",
           cellphone:"",
           qq_num:""
        },
        noticrules:{
          project_code:[{required: true, message: '请选择模块类别', trigger: 'change'}],
          contact:[{required: true, message: '请输入技术人员姓名', trigger: 'blur'}],
          cellphone:[{required:true, validator: Rgecellphone, trigger: 'blur' }],
          qq_num:[{required: true,   validator:Rgenum ,trigger: 'blur'}],
        },
        tableHeaderData:[
            { 
                prop:"index",
                label:'序号'
            },
            {
                prop:"project_type",
                label:"总模块",
                
            },
             {
                prop:"contact",
                label:"技术支持人员",
                
            },
             {
                prop:"cellphone",
                label:"联系方式",
                
            },
             {
                prop:"qq_num",
                label:"技术交流群(QQ)",
               
            },
        ],
        tableData:[
        
        ],
        options:[
          {
            label:'综合查询',
            value:"1"
          },
          {
            label:'专项工作',
            value:"2"
          },
            {
            label:'养护计划管理',
            value:"4"
          },
            {
            label:'建设计划管理',
            value:"3"
          },
        ] // 所属模块
    }
  },
  watch:{},
  computed:{},
  methods:{
     submitForm (formName) {
        this.$refs[formName].validate((valid) => {
              if (valid) {
                  console.log("验证通过")      
                  this.$ajax.post('/index.php/inform/technical/save',this.NoticruleForm).then((res)=>{
                     if(res.data.code == 1){
                      this.AddDialog = false
                    // this.$router.push({name:"Technology"})
                      this.messages(res.data.code,res.data.msg).then(()=>{
                           //this.getTechnogoData()
                            window.history.go(0)
                           
                      })
                    }else{
                      this.messages(res.data.code,res.data.msg).catch(()=>{})
                   }

                  })       
              }else{
                return false
              }
         })
    }, // 新增技术人员
      Rowclassname ({row, rowIndex}) {
          if(row.level ==1) {
              return 'rowclass'
          }
        
      },

      Dealwith () {
         console.log("处理合并函数")
          for (let i = 0; i < this.tableData.length ;i++) {
            if (i === 0) {
              this.spanArr.push(1);
              this.pos = 0
            } else {
              // 判断当前元素与上一个元素是否相同
            if (this.tableData[i].project_code ==this.tableData[i - 1].project_code) {
                this.spanArr[this.pos] += 1;
                this.spanArr.push(0);
              } else {
                this.spanArr.push(1);
                this.pos = i;
              }
            }
         }
         this.tableshow = true
      },
      arraySpanMethod ({ row, column, rowIndex, columnIndex }){
             console.log("合并方法被调用")
             if(columnIndex == 1 ){
              const _row = this.spanArr[rowIndex];
              const _col = _row > 0 ? 1 : 0;
              return {
                  rowspan: _row,
                  colspan:1
                }
            
           } 
      },
      addTechnology () {
        this.AddDialog = true
        this.NoticruleForm = {}
      },
      upDataTec (row) {
        this.AddDialog = true
        this.edititle = "修改技术人员信息"
        this.NoticruleForm = row
        //this.getTechnogoData(this.NoticruleForm)

      },
      confimDelet (row){
        this.confirm(`确定删除技术支持人员为${row.contact}的信息？`,()=>{
          this.handDelete(row)
        })
      },
      handDelete (row) {
       this.$ajax.post('/index.php/inform/technical/delTechnical',{id:row.id}).then((res)=>{
         if(res.data.code == 1){
             this.$router.push({name:"Technology"})
            this.messages(res.data.code,res.data.msg).then(()=>{
              //this.getTechnogoData()
                 window.history.go(0)
            })
         }else{
             this.messages(res.data.code,res.data.msg)
         }

       })
      },
      getTechnogoData () {
       this.tableshow = false
       this.$ajax.post('/index.php/inform/technical/allList').then((res)=>{
           this.tableData = res.data.msg.data
           if(res.data.code == 1){
             res.data.msg.data.forEach((item,index)=>{
               item.index = index+1
             })
              console.log(this.tableData)
       
              this.Dealwith()
         
         
           }else{
              this.tableshow = true
              this.messages(res.data.code,res.data.msg)
           }
       })
      },
     resetForm (formName) { // 重置查询的条件
      this.$refs[formName].resetFields();
    
    },
    confirm (text,fn) {
       this.$confirm(`${text}, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=>{
          fn()
         console.log("点击了确定")
        }).catch(()=>{
           console.log("点击了false")
          return false
        })
    },
    messages(code,text) {
          return new  Promise ((resolve,reject)=>{
             if(code == 1) {
              this.$confirm(text,'提示',{
              confirmButtonText: '确定',
              type: 'success'
            });
            resolve()
          }else {
            this.$confirm(text,'提示',{
              confirmButtonText: '确定',
              type: 'error'
            }).then(()=>{
               reject()
            })
          }
          }) 
        },
   
  },
  
  created(){
      this.height  = (window.screen.height - 225)+'px'
      
  },
  mounted(){
    this.getTechnogoData()
    console.log(this.$route)
  }
}
</script>
<style lang="stylus" scoped>
.wrape-content
 flex 1
 background rgb(241,242,247)
 padding 1% 1.2%
.content
  background white
  box-shadow 0px 1px 4px 1px gray
  .top
    font-size 14px
    color gray;
    box-shadow 0px 1px 4px -1px gray
    line-height 35px
    padding-left 5px
    span 
      margin-left 5px

.ruleForm
  display flex
  margin-top 1%
  flex-wrap wrap
  justify-content flex-start
  .el-form-item
    flex 0 0 30%
  .el-select
    display block
  .opreation
    flex 100%
    justify-items flex-start
.Table >>>
 .el-table 
  th
   background-color rgb(235,245,255) !important
 .rowclass 
   background  rgba(235,245,255,0.8)
   color #909399
   font-weight 500


.actionbtn
 display inline-block
 width 23px;
 height 23px
 padding 2px 1px
 margin-left 5px
 border-radius 5px
 cursor pointer


.oprtionbtn
 margin 0px 0px 20px 12px


.Notic >>>.el-dialog__header
 background rgb(4,31,65)
 .el-dialog__title 
  color white

.NoticruleForm
  display flex
  margin-top 30px
  flex-wrap wrap
  justify-content flex-start
  margin-left 58px
  .el-form-item
    flex 0 0 80%
  .el-select
    display block
  .el-cascader
    display block
</style>